<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module">
      import {
        getCurrentInstance,
        onMounted,
        onUpdated,
        onUnmounted,
        reactive,
        toRefs,
        Text,
        createVNode,
        h,
        render,
        Fragment,
        computed,
      } from "../js/runtime-dom/index.js";
      // import {
      //   onMounted,
      //   onUpdated,
      //   onUnmounted,
      //   Text,
      //   Fragment,
      //   createVNode,
      //   render,
      //   h,
      //   proxyRefs,
      //   toRefs,
      //   reactive,
      //   effect,
      //   watch,
      //   watchEffect,
      //   computed,
      //   ref,
      //   toRef,
      //   createRenderer,
      // } from "../js/vue.esm-browser.prod.js";

      function useLifecycle() {
        onMounted(() => {
          const instance = getCurrentInstance();
          console.log(instance);
          console.log("挂载完成");
        });
        onMounted(() => {
          console.log("挂载完成");
        });
        onUpdated(() => {
          console.log("更新完成");
        });
        onUnmounted(() => {
          console.log("卸载完成");
        });
      }
      const MyComponent = {
        setup() {
          useLifecycle();
          return {};
        },
        render(proxy) {
          console.log(proxy);
          return h("div", [
            proxy.$slots.header("h1"),
            proxy.$slots.footer(),
            proxy.$slots.default(),
          ]);
        },
      };

      render(
        h(
          MyComponent,
          {},
          {
            default: () => h("div", "default"),
            header: (title) => h("h1", title),
            footer: () => h("div", "footer"),
          }
        ),
        app
      );

      setTimeout(() => {
        render(
          h(
            MyComponent,
            {},
            {
              default: () => h("div", "default"),
              header: (title) => h("h2", title),
              footer: () => h("div", "footer"),
            }
          ),
          app
        );
      }, 1000);
      setTimeout(() => {
        render(null, app);
      }, 1100);

      // const vnode = h(Fragment, [h("span", "h1")]);
      // render(vnode, app);
      // setTimeout(() => {
      //   render(null, app);
      // }, 1000);
    </script>
  </body>
</html>
